import Icon from '@/components/Icon'
import styled from 'styled-components'

export const StyledWrap = styled.div`
	overflow-y: hidden;
	.line-wrap {
		display: flex;
		align-items: center;
		margin: 16px 0;
		.label {
			width: 68px;
			flex-shrink: 0;
		}
	}
	.text {
		flex: 1;
	}
	.action-wrap {
		position: relative;
		height: 30px;
		width: 30px;
		margin: 58px auto;
		.up {
			position: absolute;
			top: -33px;
		}
		.left {
			position: absolute;
			left: -33px;
		}
		.right {
			position: absolute;
			right: -33px;
		}
		.down {
			position: absolute;
			bottom: -33px;
		}
	}
	.btn {
		padding: 0px 5px;
		&:hover {
			background: #eff2f4;
			border: 1px solid #1e94da;
			color: #1e94da;
			.minus {
				background-position: -66px -842px;
			}
			.add {
				background-position: -22px -842px;
			}
		}
		&.save-position-btn {
			margin-left: 10px;
		}
	}
`
export const EyeIcon = styled(Icon)`
	width: 30px;
	height: 30px;
	background-position: -360px -455px;
	&.active {
		background-position: -630px -455px;
	}
`
export const ArrowIcon = styled(Icon)`
	width: 30px;
	height: 30px;
	background-position: -240px -335px;
	&.up {
		transform: rotate(-90deg);
	}
	&.left {
		transform: rotate(180deg);
	}
	&.down {
		transform: rotate(90deg);
	}
`
export const MinusIcon = styled(Icon)`
	width: 11px;
	height: 11px;
	background-position: -44px -842px;
`
export const AddIcon = styled(Icon)`
	width: 11px;
	height: 11px;
	background-position: 0px -842px;
`
export const StyledOverrideDialog = styled.div`
	margin-top: 40px;
	margin-left: 40px;
	color: #4e4e4e;
	font-size: 12px;
`
export const StyledOverrideDialogFooter = styled.div`
	margin-bottom: 25px;
	.btns-wrap {
		display: flex;
		justify-content: center;
	}
`
export const StyledChooseDialog = styled.div`
	margin-top: 10px;
	margin-left: 40px;
`
